import React, { Component } from 'react'
import { Button,Checkbox,Form, Input, Modal, Select ,Spin,Upload,message } from 'antd'
import { connect } from 'react-redux'
import {
    useraddfetch,usereditfetch
  } from 'actions/admin'
const FormItem = Form.Item
@Form.create({
    mapPropsToFields(props) {
        return {
            loginName: Form.createFormField({
            ...props.single,
            value: props.single.loginName,
            }),
            tel: Form.createFormField({
                ...props.single,
                value: props.single.tel,
            }),
            status: Form.createFormField({
                ...props.single,
                value: props.single.status == 0 ? 0 : 1,
            }),
            name: Form.createFormField({
                ...props.single,
                value: props.single.name,
            }),
            roleIds: Form.createFormField({
                ...props.single,
                value: props.single.roleIds,
            }),
            password: Form.createFormField({
                ...props.single,
                value:props.single.password,
            }),
            
        };
    }
})
@connect(
    (state, props) => ({
      config: state.config,
    })
  )
export default class Modaladduser extends Component {
  
    constructor (props) {
      super(props)
      this.state = {
        addImgUrl:"",
        loading:false
      }
    }
    componentWillMount(){
        this.setState({
          addImgUrl: this.props.single.headImagePath,
        })
    }

    onchangeFN(value){
        console.log(value)
    }
    showData(callback,e){//新增/编辑确定按钮
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if(!err){
                const datajson = Object.assign(values,{id:this.props.single.id,headImagePath:this.state.addImgUrl});
                if(this.props.isadd){
                    this.props.dispatch(useraddfetch(
                        datajson,
                        (respose) => {
                            callback&&callback()
                            message.success(respose.respMsg)
                            this.props.contentModalCancel();
                    }))
                }
                else{
                    this.props.dispatch(usereditfetch(
                        datajson,
                        (respose) => {
                            callback&&callback()
                            message.success(respose.respMsg)
                            this.props.contentModalCancel();
                    }))
                }
                
                
            }
        });
        
        
    }
    render () {
     const {form } = this.props
     const { getFieldDecorator } = form;
     const CheckboxGroup = Checkbox.Group;
     const roletype=this.props.roletype;
     const uploadImg = {
        name: 'file',
        action: global.$GLOBALCONFIG.$ctx+'image/full/path/upload',
        headers: {
        authorization: 'holder ' + sessionStorage.getItem('token'),
        },
        data:{
            type:"2"
        },
        accept:"image/jpg,image/png,image/jpeg",
        beforeUpload: (file)=>{
        const isImg = file.type.substring(0,5) === 'image';
        if (!isImg) {
            message.error('请选择图片');
        }
        this.setState({
            loading:true,
        }) 
        return isImg;
        },
        onChange:(info)=>{
        if (info.file.status !== 'uploading') {
        }
        if (info.file.status === 'done') {
            /* 把返回的路径赋值过去 */
            // this.props.callback(info.file.response.respData)
            this.setState({
                addImgUrl: info.file.response.respData,
                loading:false
            })
        } else if (info.file.status === 'error') {
            message.error(info.file.response.respMsg);
        }
        },
        showUploadList:false,//不展示上传完成之后的文件列表
     }
     const formItemLayout = {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 4 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
      };
      return (
        <Modal
            maskClosable={false}
          visible={this.props.contentModal}
          title={this.props.isadd?"新增用户":"编辑用户"}
          onCancel={this.props.contentModalCancel}
          onOk={this.showData.bind(this,this.props.callback)}
        >
            <Form>
                <FormItem label="用户头像：" {...formItemLayout}>      
                    <Spin spinning={this.state.loading} style={{width:"80px"}}>
                        <img style={{width:"80px",verticalAlign:"bottom",marginRight:"10px"}} 
                            src={ this.state.addImgUrl ? this.state.addImgUrl :require('../../images/baseImg.png') }
                        />
                    </Spin>
                    <Upload {...uploadImg}>                
                        <Button>点击选择图片</Button>
                    </Upload>              
                </FormItem>
                <FormItem label="用户名：" {...formItemLayout}>      
                {
                    getFieldDecorator('loginName', {
                    rules: [{
                        required: true,message: '请输入用户名'
                    }],
                    })(
                    <Input placeholder="请输入关键字" size="default" style={{ width: '150px' }} />
                    )
                }             
                </FormItem>
                <FormItem label="电话号码：" {...formItemLayout}>      
                {
                    getFieldDecorator('tel', {
                    rules: [{
                        required: false,
                    }],
                    })(
                    <Input placeholder="请输入关键字" size="default" style={{ width: '150px' }} />
                    )
                }             
                </FormItem>
                {this.props.isadd?<FormItem label="密码设置：" {...formItemLayout}>      
                {
                    getFieldDecorator('password', {
                    rules: [{
                        required: true,message: '请输入密码'
                    }],
                    })(
                    <Input placeholder="请输入关键字" size="default" style={{ width: '150px' }} />
                    )
                }             
                </FormItem>:""}
                
                <FormItem label="姓名：" {...formItemLayout}>      
                {
                    getFieldDecorator('name', {
                    rules: [{
                        required: false,
                    }],
                    })(
                    <Input placeholder="请输入关键字"  size="default" style={{ width: '150px' }} />
                    )
                }             
                </FormItem>
                <FormItem label="状态：" {...formItemLayout}>      
                {
                    getFieldDecorator('status', {
                    rules: [{
                        required: true,message: '请输入状态'
                    }],
                    })(
                    <Select style={{ width: 150 }}>
                        <Select.Option value={0} key={0}>禁用</Select.Option>
                        <Select.Option value={1} key={1}>启用</Select.Option>
                    </Select>
                    )
                }             
                </FormItem>
                <FormItem label="用户组权限：" labelCol={{xs: { span: 24 },sm: { span: 5 },}} style={{display:'flex',alignItems:'center'}} >      
                {
                    getFieldDecorator('roleIds', {
                    rules: [{
                        required: true,message: '请输入角色权限'
                    }],
                    })(
                      <CheckboxGroup onChange={this.onchangeFN.bind(this)}>
                        {
                          roletype.map((roletype,i)=> {
                            return(
                              <Checkbox value={roletype.id} key={i} >{roletype.name}</Checkbox>
                            )
                          })
                        }
                      </CheckboxGroup>
                    )
                }             
                </FormItem>
            </Form>
        </Modal>
      )
    }
}